import React, { useState } from 'react';
import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons'
import styles from './index.less'

const index = (props: any) => {
    // const [tableData, setTableData] = useState({ data: [], total: 0 })
    const { columns, childColumns } = props
    const [tableData, setTableData] = useState([
        {
            id: 1,
            goods_title: "白星手办",
            goods_price: "100.00",
            rush_price: "90.00",
            stock: 5,
            show: false,
            childList: [
                {
                    sku_title: "小白星",
                    sku_price: "50.00"
                }
            ]
        },
        {
            id: 2,
            show: false,
            goods_title: "路费手办",
            goods_price: "60.00",
            rush_price: "5.00",
            stock: 99,
            childList: [
                {
                    sku_title: "小路飞",
                    sku_price: "40.00"
                }
            ]
        }
    ])

    const showToggle = (id: number, show: any) => {
        return () => {
            const data: any = tableData.map((val: any) => {
                return val.id == id ? { ...val, show } : val
            })
            setTableData(data)
        }
    }

    return (
        <div>
            <table className={styles.myTable}>
                <thead>
                    <tr>
                        {columns.map((item: any, inx: number) => <th key={inx}>{item.title} </th>)}
                    </tr>
                </thead>
                <tbody>
                    {
                        tableData.map((item: any, inx: number) =>
                            <React.Fragment key={inx}>
                                <tr >
                                    {
                                        columns.map((colItem: any, colInx: number) => <td key={colInx}>
                                            {
                                                colItem['toggle'] &&
                                                <>
                                                    {item.show ? <MinusSquareOutlined onClick={showToggle(item.id, false)} />
                                                        : <PlusSquareOutlined onClick={showToggle(item.id, true)} />}
                                                </>
                                            }
                                            {item[colItem['dataIndex']]}
                                        </td>)
                                    }
                                </tr>
                                <tr className={styles.detailRow} style={!item.show ? { display: 'none' } : {}}>
                                    <td colSpan={columns.length}>
                                        <ul>
                                            {
                                                item.childList.map((child: any, childInx: number) => <li key={childInx}>
                                                    {childColumns.map((childIndex: any) => child[childIndex])}
                                                </li>)
                                            }
                                        </ul>
                                    </td>
                                </tr>
                            </React.Fragment>
                        )
                    }
                </tbody>
            </table>
        </div>
    );
};

export default index;